<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>仓库</title>
</head>
<link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
<script src="/webjars/vue/2.6.14/dist/vue.js"></script>
<script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
<script src="/webjars/axios/1.6.2/dist/axios.js"></script>
<style>
    body {
        background-color: white;
    }
</style>
<body>

<div id="repot">
    <el-header style="height: 30%">
        <el-form inline>
            <el-form-item label="货品名称">
                <el-input v-model="vo.proname"></el-input>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                        v-model="searchdate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        @change="allot">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
        </el-form>
    </el-header>

    <el-table :data="repotList.data"
              height="380" border
              style="width: 100%"
              lazy :load="load"
              row-key="entId"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              stripe>
        <el-table-column prop="entId" label="编号">
        </el-table-column>

        <el-table-column prop="processNumber" label="加工单号">
        </el-table-column>

        <el-table-column prop="orderNumber" label="计划单号">
        </el-table-column>

        <el-table-column prop="processFlow" label="加工工序">
        </el-table-column>

        <el-table-column prop="proName" label="货品名称">
        </el-table-column>

        <el-table-column prop="proSpec" label="规格">
        </el-table-column>

        <el-table-column prop="unit" label="计量单位">
        </el-table-column>

        <el-table-column prop="proNumber" label="产品数量">
        </el-table-column>

        <el-table-column prop="orderDate" label="订单日期">
        </el-table-column>

        <el-table-column prop="openDate" label="开工日期">
        </el-table-column>

        <el-table-column prop="proShop" label="生产车间">
        </el-table-column>

        <el-table-column prop="deliveryDate" label="交货日期">
        </el-table-column>

    </el-table>
    <!--        分页-->
    <el-pagination
            :page-sizes="[3,6,9]"
            :current-page.sync="vo.pageNo"
            :page-size.sync="vo.pageSize"
            @current-change="search"
            @size-change="search"
            background
            layout="prev, pager, next,sizes"
            :total="repotList.count">
    </el-pagination>
</div>
<script>
    new Vue({
        el: "#repot",
        data: {
            searchdate: [],
            repotList: [],
            vo: {
                proname: "",
                pageNo: 1,
                pageSize: 6,
                startdate: '',
                overdate: ''
            }
        },
        methods: {
            search() {
                axios.get("/pro/searchpot", {params: this.vo})
                    .then(({data}) => {
                        console.log(data)
                        this.repotList = data;
                        this.relclean();
                    })
            },
            load(tree, treeNode, resolve) {
                setTimeout(() => {
                    resolve([
                        {
                            id: 31,
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1519 弄'
                        }, {
                            id: 32,
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1519 弄'
                        }
                    ])
                }, 1000)
            },
            allot() {
                this.vo.startdate = this.searchdate[0];
                this.vo.overdate = this.searchdate[1];
            },
            relclean() {
                this.vo.startdate = '';
                this.vo.overdate = '';
            }
        },
        mounted() {
            this.search();
        }

    })

</script>

</body>
</html>